<template>
    <base-page bgColor="#FFFFFF">
        <cu-custom slot="header" :isBack="true" bgColor="bg-white">
            <block slot="content">我的奖品</block>
        </cu-custom>
        <view slot="center">
            <mescroll-uni ref="mescrollRef" @init="mescrollInit" height="100%" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback">

                <view class="jpItem" v-for="(item,index) in list" :key="index" v-if="list!=null" @click="checkHasaddr(item)">
                    <view :class="[item.award_type==2? 'jpIcon':'jpIconTwo']">
                        <image :src="item.award_img" mode=""></image>
                    </view>
                    <view class="jpinfoText">
                        <view class="infoTitle">{{item.award_name}}</view>
                        <view class="infotext" v-if="item.award_type==2">奖品已经放入 个人中心-我的钱包</view>
                        <view class="infotext" v-if="item.award_type==4&&hasAddres!=null">奖品将在7个工作日内发货</view>
                        <view class="infotext" v-if="item.award_type==4&&hasAddres==null">还未填写收货地址，点击去填写</view>
                        <view class="infotext">获奖时间：{{$Utils.formatDate(item.create_time*1000)}}</view>
                    </view>
                </view>

            </mescroll-uni>
        </view>
    </base-page>
</template>

<script>
import http from '../../common/js/http.js'
import MescrollMixin from '@/components/mescroll/mescroll-mixins.js'
import MescrollMoreItemMixin from '@/components/mescroll/mixins/mescroll-more-item.js'
export default {
	mixins: [MescrollMixin, MescrollMoreItemMixin],
	data() {
		return {
			mescroll: null,
			downOption: {
				auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
			},
			upOption: {
				auto: true, // 不自动加载
				noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty: {
					icon: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/empty.png',
					tip: '~ 空空如也 ~' // 提示
				}
			},
			list: null,
			hasAddres: null
		}
	},
	mounted() {
		this.getis_addr()
	},
	methods: {
		// 初始化
		mescrollInit(e) {
			this.mescroll = e
		},
		/* 下拉刷新的回调 */
		downCallback(e) {
			this.mescroll.resetUpScroll()
		},
		/* 上拉加载的回调 */
		upCallback(page) {
			this.getrecordPage(page.num, 10)
		},
		getrecordPage(page, page_size) {
			http.sendRequest({
				url: '/turntable/api/turntable/getTurntableInfo'
			}).then(resp => {
				let index = resp.data.list[0].game_id
				http.sendRequest({
					url: '/api/game/recordPage',
					data: {
						id: index,
						page,
						page_size
					}
				}).then(res => {
					this.mescroll.endSuccess(res.data.list.length)
					if (res.data.list.length > 0) {
						if (page == 1) {
							this.list = res.data.list
							this.page = 1
						} else {
							this.list = this.list.concat(res.data.list)
							this.page = page
						}
					}
				})
			})

		},
		getis_addr() {
			http.sendRequest({
				url: '/turntable/api/turntable/is_addr'
			}).then(res => {
				this.hasAddres = res
			})
		},
		checkHasaddr(item) {
			if (item.award_type == 4) {
				if (this.hasAddres == null) {
					this.$util.tip('正在跳转设置收货信息')
					setTimeout(() => {
						this.$util.redirectTo('/chatPages/activityitem/add_address')
					}, 800)
				}
			}
		}
	}
}
</script>
<style lang="scss" scoped>
image {
    width: 100%;
    height: 100%;
}

.jpItem {
    width: 690rpx;
    height: 188rpx;
    margin: 20rpx auto 20rpx auto;
    background: #ffffff;
    box-shadow: 0rpx 6rpx 14rpx 0rpx rgba(0, 0, 0, 0.08);
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    padding: 36rpx;

    .jpIcon {
        width: 115rpx;
        height: 117rpx;
    }

    .jpIconTwo {
        width: 103rpx;
        height: 105rpx;
    }

    .jpinfoText {
        padding-left: 23rpx;

        .infoTitle {
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #222222;
            padding-bottom: 10rpx;
        }

        .infotext {
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
        }
    }
}
</style>
